*{
	/* 页面初始化  清除所有元素的内外边距 */
	padding:0;
	margin: 0;
	 
}
body{
  background-color:black ;
}
.container{
	 /* 绝对定位 */
	 position: absolute;
	/* 元素居中到页面 */
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 200PX;
	height: 200px;
	padding: 20px;
	/* 圆型 */
	border-radius: 50%;
/* 背景渐变色  旋转150度进行着色 transparent是  透明色*/
	background-image: linear-gradient(
	150deg,
     #5f2093, 
	transparent,
	transparent
	);
	animation: moves 6s cubic-bezier(0.45,0.05,0.55,0.99) infinite;
}
.container::before,
.container::after{ 

	content: "";
	/* 相对定位 会以自身的当前位置进行位移 */
	top: -185px;
	left: 65px;
    position: relative;
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color:rgba(255,255,255,0.8);
	
	
}
.container::before{
	width: 35px;
	top: 40px;
	left: 30px;
	transform: rotate(-40deg);
}
/* 行星 start */
.container .planet{
	  
	width: 100%;
	height: 100%;	 
	border-radius: 50%;
	background-image: linear-gradient(
	150deg,
	#a37dce,
	#5f2093,
	transparent
	);
}

/* 行星end */
/* 轨道 */
.container .planet::before,
.container .planet::after{
	content: "";
	position: absolute;
	top: 90px;
	left: -40px;
	width: 300px;
	height: 40px;
	border-radius: 50%;
	border: 10px solid #c099ef;
 
	/* 先让两个为元素的上边框颜色都为透明色 */
	border-top-color: transparent;
	/* 逆时针旋转20度 */
	transform: rotate(-20deg);
}
.container .planet::after{
	border-top-color: #C099EF;
	/* 这个属性是堆叠顺序 只针对定位元素有效 这里 */
	/* 随便写个赋值就可对于的部分就会被覆盖 */
	z-index: -99;
}
@keyframes  moves{
	0%{
		top:50%;
	}
	50%{
		top:45%;
	}
	100%{
		top: 50%;
	}
}

